<!--
  说明：
  eChart的标题原本放在canvas标签里面，但无法自适应换行，有时候还会跟标题图例，图形重叠
  该组件单独提取标题出来，用div存放，可解决以上问题
-->
<template>
  <div
    v-if="title"
    :class="['component-title', componentStyle]"
  >
    <div
      :style="{ ...titleStyle, ...titleTextStyle, ...titleSize, ...resetPadding }"
      :class="['title', `${isTitleSignVisiable ? 'relativePos' : ''}`]"
    >
      <template v-if="!isTitleSignVisiable">
        <slot>{{ title }}</slot>
      </template>
      <template v-else>
        <span class="sign" :style="getSignStyle"></span>
        <span class="text" :style="getTextStyle">
          <slot>{{ title }}</slot>
        </span>
      </template>
    </div>
  </div>
</template>
<script>
import { getCssStyle } from '@/utils/util.js';
export default {
  name: 'ComponentTitle',
  components: {},
  props: {
    property: Object,
    titleTextStyle: {
      type: Object,
      default: function() {
        return {};
      },
    },
    titleSize: {
      type: Object,
      default: function() {
        return {};
      },
    },
    resetPadding: {
      type: Object,
      default: function() {
        return {};
      },
    },
  },
  data() {
    return {};
  },
  computed: {
    titleStyle() {
      return getCssStyle({
        fontSize: 18,
        paddingTop: 10,
        paddingBottom: 10,
        paddingLeft: 20,
        lineHeight: 24,
      });
    },
    title() {
      return this.property.title ? this.property.title : '';
    },
    componentStyle() {
      return this.property.componentStyle ? this.property.componentStyle : 'light';
    },
    isTitleSignVisiable() {
      return this.property?.isTitleSignVisiable;
    },
    getSignStyle() {
      const { signMarginLeft: marginLeft = 0, verticalLineBackgroundColor: backgroundColor } = this.property;
      return { ...getCssStyle({ marginLeft }), backgroundColor };
    },
    getTextStyle() {
      const { textAlign } = this.titleTextStyle;
      return { textAlign };
    },
  },
  watch: {},
  methods: {
    getCssStyle,
  },
};
</script>
<style lang="less" scoped>
.component-title {
  width: 100%;
  overflow: visible !important;
  .relativePos {
    position: relative;
    display: flex;
    align-items: center;
  }
  div {
    word-break: break-all;
  }
  &.light {
    background-color: transparent !important;
    div {
      color: #333333;
    }
  }
  &.dark {
    background-color: transparent !important;
    div {
      color: #00f7ff;
    }
    .sign {
      background-color: #00ffff;
    }
  }
  // 标题竖线统一样式
  .sign {
    display: inline-block;
    position: absolute;
    width: 4px;
    height: 16px;
    background-color: #409eff;
    left: 0;
  }
  .text {
    flex: 1;
  }
}
</style>
